<!DOCTYPE html>
<html lang="<%=language%>" dir="<%=t('direction')%>" >
    <head>
        <script>
            const translations = <%-JSON.stringify({
                ...t('member.javascript', {returnObjects: true})
            })%>;
        </script>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title><%=t('member.title')%></title>
        <link rel='stylesheet' href='/css/header.css'>
        <link rel='stylesheet' href='/css/member.css'>
        <link rel='stylesheet' href='/css/footer.css'>
        <link rel="icon" href="/img/favicon-light.png" media="(prefers-color-scheme: light)" />
        <link rel="icon" href="/img/favicon-dark.png" media="(prefers-color-scheme: dark)" id="favicon" />
        <script defer src="/scripts/esm/views/member.js" type="module"></script>
    </head>
    <body>
        <%- include(`${viewsfolder}/components/header`, {t:t, languages:languages, language:language}) %>
        <main>
            <div id="content">                  
                <div id="verifyerror" class="hidden">
                    <h2 class="red center"><%=t('member.verify_message')%></h2>
                    <p class="center"><%=t('member.resend_message.0')%><span id="sendemail" class="underline"><%=t('member.resend_message.1')%></span><%=t('member.resend_message.2')%><a href="mailto:infinitechess.org@gmail.com"><%=t('member.resend_message.3')%></a></p>
                </div>
                <h2 id="verifyconfirm" class="hidden green center"><%=t('member.verify_confirm')%></h2>
                <div class="member">
                    <picture>
                        <source srcset="/img/member_default.webp" type="image/webp" />
                        <source srcset="/img/member_default.avif" type="image/avif" />
                        <img src="/img/member_default.png" alt="Blank profile image">
                    </picture>
                    <div class="membername-container">
                        <h1 id="membername"></h1>
                        <div id="badgelist">
                            <picture id="checkmate-badge-bronze" class="badge hidden tooltip-u" data-tooltip="<%=t('member.badge-tooltips.checkmate_bronze')%>">
                                <div class="shine-clockwise"></div>
                                <div class="shine-anticlockwise"></div>
                                <source srcset="/img/badges/checkmate-badge-bronze.webp" type="image/webp" />
                                <source srcset="/img/badges/checkmate-badge-bronze.avif" type="image/avif" />
                                <img loading="lazy" src="/img/badges/checkmate-badge-bronze.png">
                            </picture>
                            <picture id="checkmate-badge-silver" class="badge hidden tooltip-u" data-tooltip="<%=t('member.badge-tooltips.checkmate_silver')%>">
                                <div class="shine-clockwise"></div>
                                <div class="shine-anticlockwise"></div>
                                <source srcset="/img/badges/checkmate-badge-silver.webp" type="image/webp" />
                                <source srcset="/img/badges/checkmate-badge-silver.avif" type="image/avif" />
                                <img loading="lazy" src="/img/badges/checkmate-badge-silver.png">
                            </picture>
                            <picture id="checkmate-badge-gold" class="badge hidden tooltip-u" data-tooltip="<%=t('member.badge-tooltips.checkmate_gold')%>">
                                <div class="shine-clockwise"></div>
                                <div class="shine-anticlockwise"></div>
                                <source srcset="/img/badges/checkmate-badge-gold.webp" type="image/webp" />
                                <source srcset="/img/badges/checkmate-badge-gold.avif" type="image/avif" />
                                <img loading="lazy" src="/img/badges/checkmate-badge-gold.png">
                            </picture>
                        </div>
                    </div>
                </div>
                <section id="stats" class="center">
                    <p><strong><%=t('member.joined')%> </strong><span id="joined"></span></p>
                    <p><strong><%=t('member.seen.0')%> </strong><span id="seen"></span><%=t('member.seen.1')%></p>
                    <p><strong><%=t('member.practice_progress')%> </strong><span id="practice_progress"></span></p>
                    <p><strong><%=t('member.ranked_elo')%> </strong><span id="ranked_elo"></span></p>
                </section>
                <div id="content-container">
                    <div style="flex-grow: 1;">
                        <button id="show-account-info" class="hidden action-button"><%=t('member.reveal_info')%></button>
                        <section id="accountinfo" class="hidden">
                            <h6 class="center"><%=t('member.account_info_heading')%></h6>
                            <p><strong><%=t('member.email')%> </strong><spam id="email"> - </spam></p>
                        </section>
                    </div>
                    <div style="flex-grow: 0;">
                        <button id="delete-account" class="hidden action-button"><%=t('member.delete_account')%></button>
                    </div>
                </div>
                <p id="change" class="hidden center"><%=t('member.password_reset_message.0')%><a href="mailto:infinitechess.org@gmail.com"><%=t('member.password_reset_message.1')%></a></p>
            </div>
        </main>
        <%- include(`${viewsfolder}/components/footer`, {t:t, languages:languages, language:language}) %>
    </body>
</html>
